<template>
    <div>
        <div class="page-header">
            <Row>
                <Col span="5">
                 <Input v-model="value14" placeholder="项目名称" clearable style="width: 200px" />
                </Col>
                <Col span="5">
                    <Input v-model="value15" placeholder="价格" clearable style="width: 200px"  />
                </Col>
                <Col span="4">
                    <Button type="primary" class="lyx-mr10" @click="find">查询</Button>
                </Col>
            </Row>
        </div>
        <div class="page-content">
            <Row>
                <Col span="24" class="lyx-mb10">
                    <Table border  ref="selection" :columns="columns12" :data="data6"  >
                        <template slot-scope="{ row }" slot="project_name">
                            <strong>{{ row.project_name }}</strong>
                        </template>
                        <template slot-scope="{ row, index }" slot="action">
                            <Button type="primary" size="small" style="margin-right: 5px" @click="showinfo(row)">查看详情</Button>
                            <Button type="primary" size="small" style="margin-right: 5px" v-if="row.state==='待审核'" @click="audit(index)">审批</Button>
                            <Button type="primary" size="small" style="margin-right: 5px" v-if="row.state==='通过'" @click="show(index)">发布</Button>
                            <Button type="primary" size="small" style="margin-right: 5px" v-if="row.state==='发布成功'"  @click="del(index)">撤回</Button>
                        </template>
                    </Table>
                </Col>
            </Row>
            <Row type="flex" justify="space-between" class="lyx-mb10">
                <Col span="12">
                    <!--                    <Button @click="handleSelectAll(true)" class="lyx-mr10">全选</Button>-->
                    <!--                    <Button @click="handleSelectAll(false)">取消</Button>-->
                </Col>
                <Col span="12">
                    <Page :total="100" show-total />
                </Col>
            </Row>
        </div>
        <Modal
                v-model="modal1"
                title="详情"
                width="500"
        >
            <Divider orientation="left">项目内容</Divider>
            <Row class="p10">
                <Col span="12">
                    <span class="bold">项目名称：:</span>
                    <span>{{datas.project_name}}</span>
                </Col>
                <Col span="10">
                    <span class="bold">项目描述：</span>
                    <span>{{datas.project_info}}</span>
                </Col>
            </Row>
            <Row class="p10">
                <Col span="12">
                    <span class="bold">审批价格：</span>
                    <span>{{datas.price}}</span>
                </Col>
                <Col span="10">
                    <span class="bold">费用类型:</span>
                    <span>{{datas.type_cost}}</span>
                </Col>
                <Col span="12">
                    <span class="bold">创建时间：</span>
                    <span>{{datas.create_time}}</span>
                </Col>
            </Row>
            <Divider orientation="left">审批理由</Divider>
            <Row class="p10">
                <Col span="24">
                    <span class="bold">制定价格对行业和消费者的影响：</span>
                    <span>{{datas.price1}}</span>
                </Col>
                <Col span="24">&nbsp;</Col>
                <Col span="24">
                    <span class="bold">定价依据和理由：</span>
                    <span>{{datas.price2}}</span>
                </Col>
                <Col span="24">&nbsp;</Col>
            </Row>
            <div slot="footer">
               <Button type="error" size="large" @click="close">关闭</Button>
            </div>
        </Modal>
        <Modal
                v-model="modal2"
                title="审批"
               >
            <div slot="footer">
                <Button type="success" size="large"  @click="yes(indexs)">通过</Button><Button type="error" size="large" @click="no(indexs)">拒绝</Button>
            </div>
           <strong style="font-size:20px ">审批详情</strong>
            <p><textarea :rows="3" :cols="80" ></textarea></p>
        </Modal>
    </div>
</template>
<script>
export default {
  data () {
    return {
      modal1: false,
      datas: [],
      modal2: false,
      indexs: 0,
      value14: '',
      value15: '',
      columns12: [
        {
          title: '项目名称',
          slot: 'project_name'
        },
        {
          title: '项目描述',
          key: 'project_info'
        },
        {
          title: '费用类型',
          key: 'type_cost'
        },
        {
          title: '价格',
          key: 'price'
        },
        /* {
          title: '制定价格对行业和消费者的影响',
          key: 'price1'
        }, */
        /* {
          title: '定价依据和理由',
          key: 'price2'
        }, */
        {
          title: '创建时间',
          key: 'create_time'
        },
        {
          title: '状态',
          width: 100,
          key: 'state'
        },
        {
          title: '操作',
          slot: 'action',
          width: 250,
          align: 'center'
        }
      ],

      data6: [
        {
          project_name: '临终咨询',
          project_info: '死亡仍是生命的一种',
          type_cost: '一条龙服务',
          price: '100',
          create_time: '2019.5.9',
          state: '待审核',
          price1: '基本服务收费标准实行政府定价，由各地价格主管部门会同有关部门在成本监审或成本调查的基础上，考虑财政补贴情况，按照非营利原则从严核定。',
          price2: '一、临终关怀；\n' +
              '\n' +
              '二、竖灵服务，即设置录堂；\n' +
              '\n' +
              '三、协助办理死亡证明，注销户口；\n' +
              '\n' +
              '四、免费车辆接送到殡仪馆办理择日选厅、交费等；\n' +
              '\n' +
              '五、选购用品；\n' +
              '\n' +
              '六、送寿衣等入殓用品；\n' +
              '\n' +
              '七、挽联、哀祭文（订购花圈）\n' +
              '\n' +
              '八、空调大巴接送至殡仪馆举行告别仪式'
        },
        {
          project_name: '礼仪服务',
          project_info: '“以善为本，以德为民，殡仪帮办，“奉献孝心”。',
          type_cost: '一条龙服务',
          price: '6666',
          create_time: '2019.5.8',
          state: '待审核'
        },
        {
          project_name: '风水安葬',
          project_info: '《生前契约》24小时上门服务 ',
          type_cost: '一条龙服务',
          price: '18888',
          create_time: '2019.5.7',
          state: '待审核'
        },
        {
          project_name: '免费看墓车 ',
          project_info: '背靠犀牛山，面向辽河水',
          type_cost: '一条龙服务',
          price: '0',
          create_time: '2019.5.6',
          state: '待审核'
        },
        {
          project_name: '一对一服务免费看墓',
          project_info: '精选高档墓区墓位做特价',
          type_cost: '一条龙服务',
          price: '666',
          create_time: '2019.5.5',
          state: '待审核'
        },
        {
          project_name: '临终关怀',
          project_info: '孝善安亲，百年安顺',
          type_cost: '一条龙服务',
          price: '1888',
          create_time: '2019.5.4',
          state: '待审核'
        },
        {
          project_name: '各种高中低档殡仪车 灵车',
          project_info: '价格透明 服务温馨',
          type_cost: '一条龙服务',
          price: '3888',
          create_time: '2019.5.3',
          state: '待审核'
        },
        {
          project_name: '专业寿衣、丧葬用品',
          project_info: '价格合理，服务周到',
          type_cost: '一条龙服务',
          price: '5888',
          create_time: '2019.5.2',
          state: '待审核'
        }

      ],
      data7: []
    }
  },
  methods: {
    del (index) {
      this.$Message.info('撤回成功')
      this.data6[index].state = '待审核'
    },
    no (data) {
      this.$Message.info('拒绝')
      this.data6[data].state = ''
      this.modal2 = false
    },
    yes (data) {
      this.$Message.info('通过')
      this.data6[data].state = '通过'
      this.modal2 = false
    },
    close () {
      this.$Message.info('关闭')
      this.modal1 = false
    },
    show (index) {
      this.$Message.info('发布成功')
      this.data6[index].state = '发布成功'
      this.modal2 = false
    },
    showinfo (data) {
      this.datas = data
      // console.log(this.datas)
      this.modal1 = true
    },
    audit (index) {
      this.modal2 = true
      this.indexs = index
    },
    find () {
      this.data6 = []
      if (this.value14 && this.value15) {
        this.data7.forEach(element => {
          if (element.project_name.indexOf(this.value14) >= 0 && element.price.indexOf(this.value15) >= 0) {
            this.data6.push(element)
          }
        })
      } else {
        this.data6 = this.data7
      }
    }
  },
  mounted () {
    this.data7 = this.data6
  }
}
</script>
<style scoped>
    .page-header{
        margin-bottom: 20px;
    }
    .lyx-mr10{
        margin-right: 10px;
    }
    .lyx-mb10{
        margin-bottom: 10px;
    }
</style>
